<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 导入字体 */
        @font-face {
            font-family: "iconfont";
            src: url('iconfont.eot?t=1615192448614');
            /* IE9 */
            src: url('iconfont.eot?t=1615192448614#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVgAAsAAAAACqAAAAURAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqIKIYYATYCJAMUCwwABCAFhG0HXRu5CBEVpAGR/TywwS3KoXO1TjMw16UqKsuffgkt0vccPP/t9/t9Zs4V5mFi0aySSCJWtZqFpiFCs5Kp8C3+1e9QnTZbORuo8qZKSuu56VGJK/FkpQECCNRuP90zl5ARqktynnqW7UzanV6axziP0yiFkF/I/z+X08bEMJvfznK5sdvL9rJlASYY2J5AvcBLCyhAzLlh7NIyr0MARyE0oIGhwEgQoqi8wLq15Zw0EEZcaIFKCK1+xlZFroBHaI7FzgK4dD4v/6CLDBg8i7p0ZMErE/R8U14kiaOiI8YsASC7CwD0LrBAPQAF2ckMrWE9rt4xuazvKT2AI8RgvnOfBz/PeJEkihAwC7I47Q8PFMFiQHxUUzyS9jiUjSMNBAo/wQgEfjIQWPiV5MJAsTfbAYkgwyDbQFq+VHAYJI0hLZBRdi5efx1fEnfv5DIfDs4ykZxsAXPpkF4WG61ogmLub+i0XvfevO7Iu0aORLXYeBaBhdO9Gsni4a9di+pZMGLz8R0XkDmXmJgls7HrhVM2rG6coIhnGzjv2IdwObh+GuieH+81nrVHEC4xZmf1wzIch2Dct5bX0r1s2HveeMnF3z3vyCFw+4iHmHI+z11ELpOSoRRQcEw0K7MlQMIhgyDdTYKEF5qXts+TIK6Q2HaAcxD0fTSPBAmEc1N6E9esJjbU0GbSVTSSxcZ3JFB6WTqJxSZSuZzIbkMWC4cGAS4R6YPTVJxs4mhNUZ54yLScgk8x4LUcKCiueAT8ll0Rt+b9/qKI7JzwzKySbA6z7xA+K4d7qAfF3Y4DsnCiTFNGgOecV9ZHBFpRziFRvXOxNBMQb+TnjU0aBmPcQw65JxlcBGo6qPJ19JNuj3Q8lLwc87ihdtj+wx626U+sc59x7hrRj4QGuEa4XIlNPkCJI0Rany08++SAVo//uZ+/ZYK0cO0JDkRvTcRjTBwvJC6chT213zc/mBX+uRdOHWnVttYau0jLVMgdzcZ4YrKy+gfupdyDxOVLKg8L9fUD+ejMKjuYfiDswP1j7zAMzP+R9wpUmP1EQ3qKxVbvmzLmMENLY/Qbee/sEQOhuriUNtUePlGmi9c3jnAXc42XOPptmreXLOZ1IuUZ9+bIPFOz6/vownPYDfNczMK7taenRuQ2ZZEeOh/2JC0Mwl7ag40ww957oVEnShtdIKPiyN660dpRFllStj3a7ZTTWujAIS19um7YW9ZSB3uCT9fqU/tO7a86s6gtATL+/+s9vTn9e8PDg8PuytP650AtANGCeWM9iHbassQDZy+Zv7ZLFEHF3H+a03Av3xiTyo7fZGKva/yrUAxFrEgNvirUjPi+zFQmP8SAgkj1aRIN3Z4K7YYrEglqT4oA9SDJb67t84ulcr8bc8YghBUJyQjAEFAAlpByoUrrwSNGO/iEdIOjDrq/OyaNGJPFAbU+AESyLxiJ3sBK9hOq9A88mf7Bl9wYnNHSjoyprFj1C0aKKcRvKBJuSffqyq0/Y2bqSMK0o7mj9EUcXMuJ531sUbpY0T8yT5WAhBs4gduwrhk64RITtXLV7mjblHUnK+FmsNJPoIhCKRB7A4UEa5E1WK0S7z9DGaMWkYKuovEdEr1ieOCyOBWEvqmt1HUqo3sPGY9ShGcRwRrgBAOo1jIMdNmTSiihLHmDVOfIRv2oqska3tKcY/I36Kk+yMuIFRVPfIIXUatsDmreUZCbKI5aMjG2i1SPu3bLUn62gwEAAAA=') format('woff2'),
                url('iconfont.woff?t=1615192448614') format('woff'),
                url('iconfont.ttf?t=1615192448614') format('truetype'),
                /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
                url('iconfont.svg?t=1615192448614#iconfont') format('svg');
            /* iOS 4.1- */
        }

        div{
            position: relative;
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }
        div::after{
            /* after 是一个子元素  
            使用绝对定位时最好给父元素加一个相对定位
            */
            position: absolute;
            right: 10px;
            bottom: 15px;
            font-family: "iconfont";
            content: "\e51a";
            color: red;
        }
        p::after{
            /* 只要使用after  就一定要他 */
            content: '';
            background: url(img/logo.png) no-repeat;
            display: inline-block;
            width: 223px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div>
       
    </div>
    <p>我是一个p标签</p>
</body>

</html>